$unit: 1px;
$scale: 1.2;
$spacer: 5*$unit;
$color-primary: #1f88fe;

$color-map: (
    'default': $color-primary,
    'light-blue': #45a8ff,
    'dark-blue':  #2b70b0,
    'orange': #fdb860,
    'red': #ff0000,
    'dark-gray': #666666,
    'gray': #999999,
    'light-gray': #cacaca,
    'dark': #333333,
    'black': #000000,
    'secondary': #aaaaaa
);
.picker-slot {
    width: 100%;
}
.right-input {
    .mint-field-core{
        text-align: right;
    }
}
.picker-items>.picker-center-highlight:before, .picker-center-highlight:after{
    height: 1px;
    margin-left: 25%;
    margin-right: 25%;
    width: 50%;
    background-color:#1F88FE;
}

.picker-slot-wrapper>.picker-selected{
    color: #0000FF;
}
// mint-ui start:
.mint-header {
    background-color: $color-primary;
}
// .mint-button:not(.is-disabled):active::after {
//       opacity: .2 ;
// }
.mint-button--primary {
      background-color: $color-primary;
}
.mint-button--primary.is-plain {
      border: $unit solid $color-primary;
      color: $color-primary;
}
.mint-badge.is-primary {
    background-color: $color-primary
}
.mint-switch-input:checked + .mint-switch-core {
    border-color: $color-primary;
    background-color: $color-primary;
}
.mint-navbar .mint-tab-item.is-selected {
    border-bottom: 3*$unit solid $color-primary;
    color: $color-primary;
}
.mint-tabbar > .mint-tab-item.is-selected {
    color: $color-primary;
}
.mint-searchbar-cancel {
    color: $color-primary;
}
.mint-checkbox-input:checked + .mint-checkbox-core {
    background-color: $color-primary;
    border-color: $color-primary;
}
.mint-radio-input:checked + .mint-radio-core {
    background-color: $color-primary;
    border-color: $color-primary;
}
.mt-range-progress {
    background-color: $color-primary;
}
.mt-progress-progress {
    background-color: $color-primary;
}
.mint-msgbox-confirm {
    color: $color-primary;
}
.mint-msgbox-confirm:active {
    color: $color-primary;
}
.mint-datetime-action {
    color: $color-primary;
}

///////////////////////
.mint-header.plain {
    background-color: #ffffff;
    color: $color-primary;
}

.mint-header {
    font-size: 18 * $unit;
    height: 55 * $unit;
    line-height: 55 * $unit;
    padding-left: 16 * $unit;
    padding-right: 16 * $unit;
}

.mint-cell:first-child .mint-cell-wrapper {
    background-image: none;
}

.mint-field {
    .mint-cell-wrapper {
        background: none;
        padding: 0;
        border-bottom: $unit solid #dddddd;
    }
}

.mint-button {
    font-size: 16px;
}

.mint-msgbox-btn {
    font-size: 16px !important;
}

.mint-cell.for-serach {
    height: inherit;
    min-height: inherit;
    font-size: inherit;
    background: inherit;
    [class*="mint-"] {
        color: inherit;
        font-size: inherit;
        background: inherit;
        border: none;
    }
}
.mint-field.for-serach {
    padding: 0 !important;
    background-image: none;
}

.mint-cell.spec {
    background-image: none;
    height: inherit;
    min-height: inherit;
    // font-size: inherit;
    // background: inherit;
    border: inherit;
    box-sizing: border-box;
    [class*="mint-"] {
        color: inherit;
        font-size: inherit;
        background: inherit;
        border: none;
    }
    
    .mint-cell-wrapper {
        padding: 0;
        line-height: inherit;
        height: inherit;
        box-sizing: border-box;
    }

    .mint-cell-allow-right:after {
        right: 1px;
    }

    &.fixed-label-width {
        
        .mint-cell-wrapper {
            display: table;
        }

        .mint-cell-title {
            min-width: 105px;
            vertical-align: middle;
            display: table-cell;
        }
        .mint-cell-value {
            text-align: right;
            vertical-align: middle;
            display: table-cell;
            word-break: break-all;

            span {
                display: inline-block;
                text-align: left;
            }
            
        }
    }

}

// mint-ui end:

.page-button-group, .page-button-group>* {
    margin-bottom: 15 * $unit;
}

@for $i from 0 to 10 {
    .mt-#{$i}, .my-#{$i} {
        margin-top: ($spacer * $i);
    }

    .mb-#{$i}, .my-#{$i} {
        margin-bottom: ($spacer * $i);
    }

    .ml-#{$i}, .mx-#{$i} {
        margin-left: ($spacer * $i);
    }

    .mr-#{$i}, .mx-#{$i} {
        margin-right: ($spacer * $i);
    }

    .pt-#{$i}, .py-#{$i} {
        padding-top: ($spacer * $i);
    }

    .pb-#{$i}, .py-#{$i} {
        padding-bottom: ($spacer * $i);
    }

    .pl-#{$i}, .px-#{$i} {
        padding-left: ($spacer * $i);
    }

    .pr-#{$i}, .px-#{$i} {
        padding-right: ($spacer * $i);
    }
}

@each $label, $val in $color-map {
    .bg-#{$label} {
        background-color: $val;
    }
    .bg-#{$label}.is-plain {
        border-color: $val;
        color: $val;
    }
    .color-#{$label} {
        color: $val;
    }
    .mt-progress.color-#{$label} {
        .mt-progress-progress {
            background-color: $val;
        }
    }
    .mt-progress.bg-#{$label} {
        .mt-progress-runway {
            background-color: $val;
        }
    }
    .border-#{label} {
        border-color: $val;
    }

    .color-#{$label} {
        .mint-cell-value {
            color: $val !important;
        }
    }
}

@each $align in left,right,center,justify {
    .text-#{$align} {
        text-align: $align;
    }
}

@for $var from 0 through 6 {
    .border-radius-#{$var} {
        border-radius: $spacer * $var $spacer * $var;
    }

    .mt-progress.border-radius-#{$var} {
        .mt-progress-runway, .mt-progress-progress {
            border-radius: $spacer * $var $spacer * $var;
        }
    }
}

.x-row {
    position: relative;
    box-sizing: border-box;
    clear: both;
    $all: 12;
    @for $var from 1 through $all {
        .x-col-#{$var} {
            float: left;
            box-sizing: border-box;
            width: 100% * $var / $all;
        }
    }
}

.progress-text {
    line-height: 25 * $unit;
    padding-right: 10 * $unit;
    color: #ffffff;
    text-align: right;
}

.no-mint-style {
    .mint-cell-wrapper {
        padding-left: 0;
        padding-right: 0;
        background-image: none;
    }
    .mint-cell {
        background-image: none;
        min-height: 32 * $unit;
        .mint-radiolist-label {
            padding-left: 0;
        }
    }
}

.display-hide {
    display: none;
}

.display-show {
    display: ''
}

.selection-list {
    .mint-radiolist-label {
        display: inline-table;
        padding-bottom: 5px;

        &.last-child {
            padding-bottom: 0;
        }

        .mint-radio, .mint-radio-label {
            display: table-cell;
            line-height: 20px;
        }

        .mint-radio-label {
            padding-left: 5px;
        }
    }
}